<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="关键词一，关键词二">
	<meta name="Description" content="网站描述内容">
	<title>Document</title>

	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}

		body {
			background: url("articleComment/bg.jpg") no-repeat fixed;
		}

		#qq {
			width: 600px;
			/*宽*/
			height: 170px;
			/*高*/
			background: #fff;
			/*背景颜色*/
			margin: 50px auto 30px;
			border-radius: 5px;
			/*Html5 圆角*/
		}

		#qq p {
			font-size: 12px;
			color: #666;
			font-family: "微软雅黑";
			line-height: 45px;
			text-indent: 20px;
		}

		#qq .message {
			width: 560px;
			height: 70px;
			margin: 0 auto;
			overflow: hidden;
			outline: none;
			border: 1px solid #ddd;
			padding: 8px;
			box-sizing: border-box;
			font-size: 14px;
			-webkit-background-clip: text;
			color: transparent;
			background-image: linear-gradient(to right, #778899 0%, #333 100%);
			/*粗细 风格 颜色*/
		}

		#qq .But {
			width: 560px;
			height: 35px;
			margin: 15px auto 0px;
			position: relative;
			/*相对，参考对象*/
		}

		#qq .But img.bq {
			float: left;
			/*左浮动*/
		}

		#qq .But span.submit {
			width: 80px;
			height: 30px;
			background: #ff8140;
			display: block;
			float: right;
			/*右浮动*/
			line-height: 30px;
			border-radius: 5px;
			cursor: pointer;
			/*手指*/
			color: #fff;
			font-size: 12px;
			text-align: center;
			font-family: "微软雅黑";
		}

		/*face begin*/
		#qq .But .face {
			width: 440px;
			background: #fff;
			border: 1px solid #ddd;
			box-shadow: 0 0 12px #666;
			position: absolute;
			/*绝对定位*/
			top: 21px;
			left: 15px;
			display: none;
			/*隐藏*/
		}

		#qq .But .face ul {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 8px;
			box-sizing: border-box;
		}

		#qq .But .face ul li {
			width: 30px;
			height: 30px;
			list-style-type: none;
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		/*msgCon begin*/
		.msgCon {
			width: 600px;
			margin: 0px auto;
			margin-bottom: 60px;
		}

		.msgCon .msgBox {
			background: #fff;
			padding: 10px;
			box-sizing: border-box;
			margin-top: 16px;
			border-radius: 4px;
		}

		.msgCon .msgBox .headUrl {
			width: 100%;
			height: 60px;
			border-bottom: 1px dotted #ddd;
			display: flex;
			align-items: center;
		}

		.msgCon .msgBox .headUrl img {
			width: 46px;
			height: 46px;
			border-radius: 50%
		}

		.msgCon .msgBox .headUrl div {
			flex: 1;
			display: flex;
			flex-flow: column;
			font-size: 16px;
			margin-left: 16px;
			-webkit-background-clip: text;
			color: transparent;
			background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
		}

		.msgCon .msgBox .headUrl div .time {
			font-size: 14px;
			margin-top: 6px;
			-webkit-background-clip: text;
			color: transparent;
			background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
		}

		.msgCon .msgBox .headUrl a {
			font-size: 14px;
			padding: 10px;
			color: salmon;
			cursor: pointer;
		}

		.msgCon .msgBox .msgTxt {
			font-size: 14px;
			color: #666;
			min-height: 40px;
			line-height: 24px;
			padding: 10px;
			box-sizing: border-box;
			word-wrap: break-word;
			-webkit-background-clip: text;
			color: transparent;
			background-image: linear-gradient(to right, #778899 0%, #333 100%);
		}
	</style>


</head>

<body>

	<div id="qq">
		<p>骡妈妈等你来评论噢!</p>
		<div class="message" contentEditable='true'></div>
		<div class="But">
			<img src="articleComment/bba_thumb.gif" class='bq' />
			<span class='submit'>发表</span>
			<!--face begin-->
			<div class="face">
				<ul>
					<li><img src="articleComment/smilea_thumb.gif" title="呵呵]"></li>
					<li><img src="articleComment/tootha_thumb.gif" title="嘻嘻]"></li>
					<li><img src="articleComment/laugh.gif" title="[哈哈]"></li>
					<li><img src="articleComment/tza_thumb.gif" title="[可爱]"></li>
					<li><img src="articleComment/kl_thumb.gif" title="[可怜]"></li>
					<li><img src="articleComment/kbsa_thumb.gif" title="[挖鼻屎]"></li>
					<li><img src="articleComment/cj_thumb.gif" title="[吃惊]"></li>
					<li><img src="articleComment/shamea_thumb.gif" title="[害羞]"></li>
					<li><img src="articleComment/zy_thumb.gif" title="[挤眼]"></li>
					<li><img src="articleComment/bz_thumb.gif" title="[闭嘴]"></li>
					<li><img src="articleComment/bs2_thumb.gif" title="[鄙视]"></li>
					<li><img src="articleComment/lovea_thumb.gif" title="[爱你]"></li>
					<li><img src="articleComment/sada_thumb.gif" title="[泪]"></li>
					<li><img src="articleComment/heia_thumb.gif" title="[偷笑]"></li>
					<li><img src="articleComment/qq_thumb.gif" title="[亲亲]"></li>
					<li><img src="articleComment/sb_thumb.gif" title="[生病]"></li>
					<li><img src="articleComment/mb_thumb.gif" title="[太开心]"></li>
					<li><img src="articleComment/ldln_thumb.gif" title="[懒得理你]"></li>
					<li><img src="articleComment/yhh_thumb.gif" title="[右哼哼]"></li>
					<li><img src="articleComment/zhh_thumb.gif" title="[左哼哼]"></li>
					<li><img src="articleComment/x_thumb.gif" title="[嘘]"></li>
					<li><img src="articleComment/cry.gif" title="[衰]"></li>
					<li><img src="articleComment/wq_thumb.gif" title="[委屈]"></li>
					<li><img src="articleComment/t_thumb.gif" title="[吐]"></li>
					<li><img src="articleComment/k_thumb.gif" title="[打哈气]"></li>
					<li><img src="articleComment/bba_thumb.gif" title="[抱抱]"></li>
					<li><img src="articleComment/angrya_thumb.gif" title="[怒]"></li>
					<li><img src="articleComment/yw_thumb.gif" title="[疑问]"></li>
					<li><img src="articleComment/cza_thumb.gif" title="[馋嘴]"></li>
					<li><img src="articleComment/88_thumb.gif" title="[拜拜]"></li>
					<li><img src="articleComment/sk_thumb.gif" title="[思考]"></li>
					<li><img src="articleComment/sweata_thumb.gif" title="[汗]"></li>
					<li><img src="articleComment/sleepya_thumb.gif" title="[困]"></li>
					<li><img src="articleComment/sleepa_thumb.gif" title="[睡觉]"></li>
					<li><img src="articleComment/money_thumb.gif" title="[钱]"></li>
					<li><img src="articleComment/sw_thumb.gif" title="[失望]"></li>
					<li><img src="articleComment/cool_thumb.gif" title="[酷]"></li>
					<li><img src="articleComment/hsa_thumb.gif" title="[花心]"></li>
					<li><img src="articleComment/hatea_thumb.gif" title="[哼]"></li>
					<li><img src="articleComment/gza_thumb.gif" title="[鼓掌]"></li>
					<li><img src="articleComment/dizzya_thumb.gif" title="[晕]"></li>
					<li><img src="articleComment/bs_thumb.gif" title="[悲伤]"></li>
					<li><img src="articleComment/crazya_thumb.gif" title="[抓狂]"></li>
					<li><img src="articleComment/h_thumb.gif" title="[黑线]"></li>
					<li><img src="articleComment/yx_thumb.gif" title="[阴险]"></li>
					<li><img src="articleComment/nm_thumb.gif" title="[怒骂]"></li>
					<li><img src="articleComment/hearta_thumb.gif" title="[心]"></li>
					<li><img src="articleComment/unheart.gif" title="[伤心]"></li>
					<li><img src="articleComment/pig.gif" title="[猪头]"></li>
					<li><img src="articleComment/ok_thumb.gif" title="[ok]"></li>
					<li><img src="articleComment/ye_thumb.gif" title="[耶]"></li>
					<li><img src="articleComment/good_thumb.gif" title="[good]"></li>
					<li><img src="articleComment/no_thumb.gif" title="[不要]"></li>
					<li><img src="articleComment/z2_thumb.gif" title="[赞]"></li>
					<li><img src="articleComment/come_thumb.gif" title="[来]"></li>
					<li><img src="articleComment/sad_thumb.gif" title="[弱]"></li>
					<li><img src="articleComment/lazu_thumb.gif" title="[蜡烛]"></li>
					<li><img src="articleComment/clock_thumb.gif" title="[钟]"></li>
					<li><img src="articleComment/cake.gif" title="[蛋糕]"></li>
					<li><img src="articleComment/m_thumb.gif" title="[话筒]"></li>
					<li><img src="articleComment/weijin_thumb.gif" title="[围脖]"></li>
					<li><img src="articleComment/lxhzhuanfa_thumb.gif" title="[转发]"></li>
					<li><img src="articleComment/lxhluguo_thumb.gif" title="[路过这儿]"></li>
					<li><img src="articleComment/bofubianlian_thumb.gif" title="[bofu变脸]"></li>
					<li><img src="articleComment/gbzkun_thumb.gif" title="[gbz困]"></li>
					<li><img src="articleComment/boboshengmenqi_thumb.gif" title="[生闷气]"></li>
					<li><img src="articleComment/chn_buyaoya_thumb.gif" title="[不要啊]"></li>
					<li><img src="articleComment/daxiongleibenxiong_thumb.gif" title="[dx泪奔]"></li>
					<li><img src="articleComment/cat_yunqizhong_thumb.gif" title="[运气中]"></li>
					<li><img src="articleComment/youqian_thumb.gif" title="[有钱]"></li>
				</ul>
			</div>
			<!--face end-->
		</div>
	</div>
	<!--qq end-->
	<!--msgCon begin-->
			<div class="msgCon" >
			</div>

	<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
	<script src="/js/plugins/jrender/jrender.js"></script>
	<script src="/js/common.js"></script>
	<script type="text/javascript">
        $(function () {
            localStorage.clear(); //将数据清楚
			//注释一下
            //获取地址栏上的id,作为全局变量
            var articleId = getParams().id;
            var type=getParams().type;
            //定义一个评论id
            var articleCommentId = 0;
            //发送ajax请求查询所有聊天记录
            $.get("/articleComments", {type: type, articleId: articleId}, function (data) {
                List = data.list || []
                List.forEach(item => {
                    let str =
                        `<div class='msgBox'>
						<div class="headUrl">
							<img src=${item.user.headImgUrl} width='50' height='50'/>
							<div>
								<span class="title">${item.user.nickName}</span>
								<span class="time">${item.releaseTime}</span>
							</div>
							<a class="del" data-id="${item.id}">删除</a>
						</div>
						<div class='msgTxt'>
						${item.content}
						</div>
					</div>`
                    $(".msgCon").prepend(str);
                })
            }, "json")
            //从缓存中获取数据并渲染
            let msgBoxList = JSON.parse(window.localStorage.getItem('msgBoxList')) || [];
            innerHTMl(msgBoxList)

            //点击小图片，显示表情
            $(".bq").click(function (e) {
                $(".face").slideDown(); //慢慢向下展开
                e.stopPropagation(); //阻止冒泡事件
            });

            //在桌面任意地方点击，关闭表情框
            $(document).click(function () {
                $(".face").slideUp(); //慢慢向上收
            });

            //点击小图标时，添加功能
            $(".face ul li").click(function () {
                let simg = $(this).find("img").clone();
                $(".message").append(simg); //将表情添加到输入框
            });
            var user = getUser();
            //点击发表按扭，发表内容
            $("span.submit").click(function () {
                let txt = $(".message").html(); //获取输入框内容
                if (!txt) {
                    $('.message').focus(); //自动获取焦点
                    return;
                }
                //将内容content,时间date,用户id,文章id作为参数发送post请求,添加到数据库中
                var releaseTime = dateFtt("yyyy-MM-dd hh:mm", new Date());
                $.post("/articleComments", {
                    "user.id": user.id,
                    content: txt,
                    releaseTime: releaseTime,
                    articleId: articleId,
                    type: type
                }, function (data) {
                    articleCommentId = data.articleCommentId;
                    // console.log("有没有ID="+articleCommentId);
                })


                let obj = {
                    msg: txt,
                    headImgUrl: user.headImgUrl,
                    nickName: user.nickName,
					id:articleCommentId,
                    releaseTime: dateFtt("yyyy-MM-dd hh:mm", new Date())
                }
                msgBoxList.unshift(obj) //添加到数组里
                window.localStorage.setItem('msgBoxList', JSON.stringify(msgBoxList)) //将数据保存到缓存
                innerHTMl([obj]) //渲染当前输入框内容
                $('.message').html('') // 清空输入框

            });

            //删除当前数据
            $("body").on('click', '.del', function () {
                let index = $(this).parent().parent().index();
                msgBoxList.splice(index, 1)
                window.localStorage.setItem('msgBoxList', JSON.stringify(msgBoxList)) //将数据保存到缓存
                $(this).parent().parent().remove()
                articleCommentId = $(this).data("id");
                $.ajax({
                    type: "delete",
                    url: "/articleComments/" + articleCommentId + "/"+type
                })
            })
            //渲染html
            console.log(getUser());

            function dateFtt(fmt, date) { //author: meizz
                var o = {
                    "M+": date.getMonth() + 1,     //月份
                    "d+": date.getDate(),     //日
                    "h+": date.getHours(),     //小时
                    "m+": date.getMinutes(),     //分
                    "s+": date.getSeconds(),     //秒
                    "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds()    //毫秒
                };
                if (/(y+)/.test(fmt))
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }

            function innerHTMl(List) {
                List = List || []
                List.forEach(item => {
                    let str =
                        `<div class='msgBox'>
						<div class="headUrl">
							<img src=${item.headImgUrl} width='50' height='50'/>
							<div>
								<span class="title">${item.nickName}</span>
								<span class="time">${item.releaseTime}</span>
							</div>
							<a class="del" data-id="${item.id}">删除</a>
						</div>
						<div class='msgTxt'>
							${item.msg}
						</div>
					</div>`
                    $(".msgCon").prepend(str);
                })
            }
        })
	</script>


</body>

</html>